import { useFormContext } from 'react-hook-form';

const Input = ({ label, name, ruleOptions, ...props }) => {
  const { register, formState: { errors }} = useFormContext()
  return (
    <div>
      <div className="flex flex-col w-full gap-2">
        <div className="flex justify-between">
          <label className="font-semibold capitalize">
            {label}
          </label>
        </div>
        <input
          className="w-full p-2 font-medium border rounded-md border-slate-300 placeholder:opacity-60"
          {...register(name, ruleOptions)}
          {...props}
        />
      </div>
      {errors?.[name] && <p style={{ color: 'red' }}>{errors[name].message}</p>}
    </div>
  )
}

export default Input